<script>
import MyBase from '@/common/formComponent/MyBase';
import UniRadioGroup from 'uview-ui/components/u-radio-group/u-radio-group';
import UniRadio from 'uview-ui/components/u-radio/u-radio';

export default {
  name: 'MyRadioBox',

  components: {
    MyBase
  },

  model: {
    prop: 'value',
    event: 'update:value'
  },

  props: {
    value: {
      type: [String, Number],
      default: ''
    },

    title: {
      type: String,
      default: ''
    },

    dataList: {
      type: Array,
      default: () => []
    },

    optionView: {
      type: Object,
      required: true
    },

    disabled: {
      type: Boolean,
      default: false
    },

    icon: {
      type: String,
      default: '' // moments
    },

    isShowIconArrow: {
      type: Boolean,
      default: true
    }

  },

  render(h) {
    const radioItem = this.dataList.map(item => {
      const optionView = this.optionView;

      return h(UniRadio, {
        props: {
          labelSize: 38,

          name: item[optionView.value]
        }
      }, item[optionView.label]);
    });

    const baseSlots = {
      header: () => {
        return (
          <view>
            { this.title }
          </view>
        );
      },

      content: () => {
        return h(UniRadioGroup, {
          style: {
            width: '100%'
          },
          props: {
            wrap: true,
            size: 40,
            iconSize: 28,
            value: this.value,
            disabled: this.disabled
          },

          on: {
            change: v => {
              this.$emit('update:value', v);
            }
          }

        }, radioItem);
      }
    };

    return (
      <My-Base icon={this.icon} isShowIconArrow={ false } scopedSlots={ baseSlots }/>
    );
  }
};
</script>

<style lang="scss" scoped>
</style>
